<template>
	<div class="brand-page">
		<mt-index-list :height="667">
			<mt-index-section index="">
				<div class="rec-brand ">
					<div>				
						<h3 class="sub-title">推荐品牌</h3>
						<div class="rec-brand-wrap flex bg_white">
							<div class="rec-brand-item " v-for="(item,index) in recBrandsList" @click="showSideBar(item.id,item.name)" :key="index">
								<img :src="item.logo" class="brand-logo">
								<p class="fs12 c_333">{{item.name}}</p>
							</div>
						</div>
					</div>
				</div>
			</mt-index-section>
		 	<mt-index-section :index="item.prefix" v-for ="(item,index) in allBrandList" :key="index">
				<div class="bg_white lhh50" v-for="(brand,k) in item.data" @click="showSideBar(brand.id,brand.name)" :key="k">		    		
					<img :src="brand.logo" class="brand-logo align_middle pl10">
					<span class="inblo lhh40 align_middle c_333">{{brand.name}}</span>
				</div>
			</mt-index-section>		  
		</mt-index-list>
		<div v-transfer-dom>
	       <popup v-model="isSideBarShow" position="right" class="bg_white">
	        	<div style="width:8.0rem;">
	        		<x-header :left-options="{backText: '',preventGoBack:true}" @on-click-back="isSideBarShow = false">{{brandname}}</x-header>
	        	</div>
	        	<template v-if="!isSeriesListEmpty">	        		
		        	<template v-for="(item, index) in seriesList" v-if="item.infos.length > 0">
		        		<h3 class="pl10 fs14" :key="item.s_name">{{item.s_name}}</h3>
			        	<ul class="brand-list bg_white" :key="index">
			        		<li class="fullwidth bor-b" v-for="(info,i) in item.infos" :key="i">
			        			<router-link :to="{path:'/series/list',query:{brandid:info.brand_id,series_id:info.id,linkType:1}}" class="block">	  
				        			<img :src="info.logo" class="car-image mr10 fl">
				        			<div class="mt10 clearfix">
				        				<h4 class="fs16 elli c_333">{{info.name}}</h4>	
				        				<div class="price fs12 elli" v-if="info.low_price && !info.high_price">{{truckBasicInfo.truckInfo}}万元起</div>
										<div class="price fs12 elli" v-if="!info.low_price && info.high_price">{{info.high_price}}万元</div>
										<div class="price fs12 elli" v-if="info.low_price && info.high_price">{{info.low_price}}-{{info.high_price}}万元</div>
										<div class="price fs12 elli" v-if="!info.low_price && !info.high_price">暂无报价</div>		        				
				        			</div>
			        			</router-link>
			        		</li>
			        	</ul>
		        	</template>
	        	</template>
	        	<div v-else class="textc nodata_wrap"> 
					<img src="../../images/nodata.png">
					<div class="c_999 mt15">暂无数据</div>
				</div>
	        	
	       </popup>
	    </div>
	    <scrollTop></scrollTop>
	</div>
</template>

<script>
	import { IndexList, IndexSection,Cell } from 'mint-ui';
	import Vue from 'vue'
	Vue.component(IndexList.name, IndexList);
	Vue.component(IndexSection.name, IndexSection);
	Vue.component(Cell.name, Cell);
	import { TransferDom, Popup, XHeader} from 'vux'
	import { mapActions, mapGetters } from 'vuex'
	import scrollTop from '../../base/scrollTop.vue'
	export default {
		directives: {
		    TransferDom
		},
		components: {
		    Popup,
		    XHeader,
		    scrollTop
		},
		computed:{
			...mapGetters('brand',[
				'recBrandsList',
				'allBrandList',
				'seriesList',
				'isSeriesListEmpty'
			])
		},
		data () {
			return {
				isSideBarShow:false,
				brandname:''
			}
		},
		methods:{
			...mapActions('brand',[
				'getRecBrands',
				'getAllBrands',
				'getListSeriesByBrand'
			]),
			showSideBar(brandid,brandname){
				this.$store.commit('brand/GETSERIESLIST',[])
				this.isSideBarShow = true;
				this.brandname = brandname;
				this.getListSeriesByBrand({brandid})
			}
		},
		mounted () {
			this.getRecBrands();
			this.getAllBrands();
		}
	}
</script>

<style lang = 'scss' scoped>
	.rec-brand-wrap {
		flex-wrap: wrap;
	}
	.rec-brand-item {
		padding: 0.26667rem 0.26667rem 0.26667rem;
		width: 25%;
		text-align: center;
		border-bottom: 1px solid #f5f5f5;
	}
	.new-resource {
		padding: 0 0.16rem 0.21333rem;
		.item {
			display: inline-block;
		    line-height: 0.8rem;
		    height: 0.85333rem;
		    border: 1px solid #E9E9E9;
		    border-radius: 0.42667rem;
		    font-size: 0.37333rem;
		    color: #333;
		    margin-top: 0.21333rem;
		    text-align: center;
		    padding: 0 0.32rem;
		    margin-right: 0.26667rem;
		}
	}
	.brand-list {
		padding-left: 0.26667rem;
		padding-right: 0.26667rem;
		width: 8.0rem;
		li {
			padding: 0.26667rem 0;
		}
	}
	.nodata_wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		img {
			width: 2.13333rem;
			align-self: center;
		}
	}
	
</style>